<template>
	<view class="team clearfix">
		<cu-custom bgColor="bg-white" isBack>
			<block slot="content">付款记录</block>
		</cu-custom>
		<view v-for="(item,index) in List" class="flex px15 flex-direction wp100 bg-white radius-5 mt10 py15" :key="index">
			<view v-if="item.isOff==0" class="flex align-center justify-end text-white">
				<view class="discenter canclebutton px10 py5" @click="canclefukuan(item)">取消付款</view>
			</view>
			<view v-if="item.isOff==1" class="flex align-center justify-end text-green">已完成</view>
			<view v-if="item.isOff==2" class="flex align-center justify-end text-info">已取消</view>
			<view >{{item.name}}</view>
			<view class="flex align-center mt10 justify-between">
				<text>数量</text>
				<text>时间</text>
			</view>
			<view class="flex align-center mt10 justify-between">
				<text class="text-red">-{{item.money}}</text>
				<text class="text-info">{{item.addTime}}</text>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
	data() {
		return {
			
		}
	},
	onShow() {
		this.clearData()
		this.getData()
	},
	onReachBottom() {
		this.getData()
	},
	methods: {
		clearData(){
			this.List=[]
			this.page=1
			this.finish=false
		},
		async canclefukuan(item){
			let {data} = await this.$http.post('wallet.canclepay', {logId:item.id}, { tipConfig: { storeLoading: true, isSuccessTip: true} })
			this.clearData()
			this.getData()
		},
		async getData() {
			if (this.finish) return
			let {
				data:{logs}
			} = await this.$http.post('wallet.fukuanhistory', { page: this.page,limit:20 })
			this.finish = logs.length < 20
			!this.finish && (this.page += 1)
			this.List = [...this.List, ...logs]
		},
	}
}
</script>

<style lang="less">
.wallet-box{
	width: calc(100% - 60rpx);
	margin-left: 30rpx;
	height: 300rpx;
}
.por{
	position: relative;
	z-index: 1;
}
.wallet-pic{
	width: calc(100% - 60rpx);
	height: 300rpx;
	position: absolute;
}
.canclebutton{
	border-radius:10rpx;
	background-color: #ff1818;
}
.wallet-end{
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 110rpx;
	background-color: #FFFFFF;
}
.wallet-button{
	width: 220rpx;
	height: 80rpx;
	background-color: #D73329;
	border-radius: 10rpx;
}
.wallet-buttons{
	width: 336rpx;
	height: 80rpx;
	background-color: #D73329;
	border-radius: 10rpx;
}
</style>
